<template>
  <div class="wrap-gone">
    <div class="banner" :style="{height:bannerHeight+'px'}">
      <div class="shop" @click="buy"><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/shop-car.png" alt=""><span>去购买</span></div>
    </div>
    <div class="icon">
      <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/icon-1.png" alt=""><span>流失客户</span></div>
      <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/icon-2.png" alt=""><span>主动触达</span></div>
      <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/icon-3.png" alt=""><span>获客成本低</span></div>
      <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/icon-4.png" alt=""><span>易操作</span></div>
    </div>
    <div class="left-word">
      <div>给流失客户发送优惠券，激活流失客户</div>
      <img class="computer" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/content-1.png" alt="">
    </div>
    <div class="left-word">
      <img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/content-2.png" alt="">
      <div>促活沉默顾客，将流量变成留量，能+对用户进行多维度，精细化分类。召回长时间未再次消费的顾客，通过智能后台推送最新活动，对沉默顾客进行促活召回。</div>
    </div>
     <div class="left-word">
      <div>充分挖掘已消费用户潜力 增加用户和油站商，增加用户和油站商家之间的粘性同时刺激用户持续性消费，为商家实现精准锁客</div>
      <img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/content-3.png" alt="">
    </div>
     <div class="left-word">
      <img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/content-4.png" alt="">
      <div>实时监控并统计召回人次，流水，时常等数据，对召回效果深度分析，实现油站对自有客户精细化管理，提升油站商家经营效率和营业额</div>
    </div>
    <Footer/>
  </div>
</template>
<script>
import mixins from '../../components/onResize/mixin'
import Footer from './components/footer'
export default {
  mixins: [mixins],
  data() { 
    return {
      bannerHeight: 400
    } 
  },
  methods: {
    buy() {
      this.$router.push({ path: '/marketShop/shopCenter' })
    },
    setSize () {
      // 通过浏览器宽度(图片宽度)计算高度
      if(this.screenWidth < 1080) return
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
  },
  components: {
    Footer
  }
}
</script>
<style lang="less" scoped>
.wrap-gone{
  width: 100%;
  padding: 10px 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.banner{
  width: 100%;
  background: url('https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/gone/gone-banner.png') no-repeat;
  background-size: 100%;
  position: relative;
  margin-bottom: 20px;
  .shop{
    position: absolute;
    width: 240px;
    top: 70%;
    left: 10%;
    height: 40px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #034CAA;
    border-radius: 25px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #2966FF;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    >img{
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
.icon{
  width: 100%;
  height: 150px;
  padding: 0 100px;
  display: flex;
  justify-content: space-around;
  >div{
    width: 140px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    >img{
      display: block;
      width: 100px;
      height: 100px;
    }
    >span:nth-child(2) {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}
.left-word{
  width: 70%;
  height: 350px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 40px;
  >div{
    width: 350px;
  }
  .computer{
    display: block;
    width: 354px;
    height: 200px;
    margin-top: 80px;
  }
  >img{
    display: block;
    width: 283px;
    height: 200px; 
  }
}
</style>